import { useUserStore } from "@/stores/user"
import type { DirectiveBinding } from "vue"

/**
 * 拿到 自定义指令的 el 和 bindings，和 userStore里的用户数据对比
 * @param el html 元素
 * @param bindings 指令传入的参数
 */
function checkPermmision(el: HTMLElement, bindings: DirectiveBinding) {
  const { value } = bindings
  // userStore里的用户数据
  const store = useUserStore()
  const roles = computed(() => store.state.roles.map((role) => role.name))

  if (value && Array.isArray(value)) {
    const hasPermision = roles.value.some((item) => value.includes(item))
    if (!hasPermision) {
      // 权限指令不是动态的， 删除后回不来了，权限变了，不会再显示，除非刷新页面
      // 非要的话，可以考虑 v-if ,来实现
      el.parentNode?.removeChild(el)
    }
  } else {
    // 没传数据
    throw new Error("请提供权限")
  }
}
/**
 * 指令如果写成一个函数 他默认就是 mounted 和 updated
 *
 * @param el html 元素
 * @param bindings 指令传入的参数
 */
const permission = (el: HTMLElement, bindings: DirectiveBinding) => {
  checkPermmision(el, bindings)
}
export default permission
